<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/basic.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
    <!-- 头部 -->
    <div class="importHeard"></div>
    <!-- 头部 -->

    <!-- 导航 -->
    <div class="nav">
        <div class="main">
            <div class="nav-x">
                <div class="navMain">
                    <span class="iconfont">&#xe63a;</span>
                    全部商品分类
                </div>
                <span>优惠券</span>
                <span>图书畅销榜</span>
                <span>新书热卖榜</span>
                <span>童书绘本</span>
                <span>小说文学</span>
                <span>社科经管</span>
                <span>网络科技</span>
                <span>医学</span>
                <span>教材教辅</span>
                <span>生活艺术</span>
            </div>
            <div class="nav-t">
                <ul class="clearfix">
                    <li><a href="#">我爸爸+我妈妈绘本(2册)</a></li>
                    <li><a href="#">小熊宝宝绘本(15册)</a></li>
                    <li><a href="#">宝贝的奇妙洞洞书(4册)</a></li>
                    <li><a href="#">有故事的汉字</a></li>
                    <li><a href="#">余华作品14册</a></li>
                    <li><a href="#">余华与海盐</a></li>
                    <li><a href="#">世事如烟</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航 -->

    <!-- 类别 -->
    <p class="include main">
        <span>图书</span>
        <span>&gt;</span>
        <span>童书 育儿</span>
        <span>&gt;</span>
        <span>绘本</span>
    </p>
    <!-- 类别 -->

    <!-- 主要内容 -->
    <div class="detail main clearfix">
        <!-- 左边 -->
        <div class="detail-left">
            <div class="hotact">
                <div class="hottitle">
                    热门活动
                </div>
                <div class="hotcont">
                    <ul>
                        <li><a href="#">【热门】 开学囤书推荐</a></li>
                        <li><a href="#">【热门】你的漫画时光</a></li>
                        <li><a href="#">【热门】和风 日式工作法</a></li>
                    </ul>
                    <img src="./imgs/200-75.jpg" alt="">
                    <img src="./imgs/200-75 (1).jpg" alt="">
                    <img src="./imgs/200-75 (2).jpg" alt="">
                </div>
            </div>
            <div class="another">
                <div class="another-title">
                    该作者的其他商品
                </div>
                <div class="another-cont">
                    <div class="ano-book">
                        <div>
                            <img src="./imgs/1202165433_0_0_800x800.jpg" alt="">
                        </div>
                        <p><a href="#">我爸爸+我妈妈绘本(2册)</a></p>
                        <span>文轩价:</span>
                        <b>￥50.20</b>
                    </div>
                    <div class="ano-more">
                        <p><a href="#">更多&gt;&gt;</a></p>
                    </div>
                </div>
            </div>
            <div class="det-history">
                <div class="det-history-title">
                    你的最近浏览记录
                </div>
                <div class="det-history-cont">
                    <div class="det-book">
                        <div>
                            <img src="./imgs/1202165433_0_0_800x800.jpg" alt="">
                        </div>
                        <p><a href="#">我爸爸+我妈妈绘本(2册)</a></p>
                        <span>文轩价:</span>
                        <b>￥50.20</b>
                    </div>
                    <p class="det-p">
                        <a href="#">* 谁的青春不迷茫</a>
                    </p>
                    <p class="det-p">
                        <a href="#">* 世事如烟</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="detail-right">

            <div class="r-top">
                            <!-- 原图 -->
            <div class="ori">
                <img src="./imgs/1202165433_0_0_800x800.jpg" alt="">
                <!-- 滤镜 -->
                <div class="fil">

                </div>
            </div>
            <!-- 放大区 -->
            <div class="large">
                <img src="./imgs/1202165433_0_0_800x800.jpg" alt="">
            </div>

            <div class="right-r">
                <!-- 购物模板 -->
                <div class="shopmod">
                    <div class="bname">
                        <h1>幼儿睡前故事绘本(全60册)</h1>
                        <h3>有声读物绘本，幼儿童话故事书启蒙认知睡前小故事图书，婴儿早教书籍， 0-3-6岁</h3>
                        <h3>企业采购书卡&书目服务电话 028-83157118（法定工作日9:00-17:00）</h3>
                    </div>

                    <!-- 书属性 -->
                    <div class="battr">
                        <dl class="price-o">
                            <dt class="attr-title">定　　价 ：</dt>
                            <dd>
                                <b>￥120.00</b>
                            </dd>
                        </dl>
                        <dl class="price-n">
                            <dt class="attr-title">文 轩 价 ：</dt>
                            <dd>
                                <b>￥31.20</b>
                            </dd>
                        </dl>
                        <dl class="author">
                            <dt class="attr-title">作　　者 ：</dt>
                            <dd>
                                <a href="#" style="color:#1D66B2">罗自国</a>
                            </dd>
                        </dl>
                        <dl class="class">
                            <dt class="attr-title">所属分类 ：</dt>
                            <dd>
                                <a target='_blank' class='link3' href='#'>图书</a>
                                > <a target='_blank' class='link3' href='#'>童书 育儿</a>
                                > <a target='_blank' class='link3' href='#'>绘本</a>
                            </dd>
                        </dl>
                        <dl class="sale">
                            <dt class="attr-title">促销活动 ：</dt>
                            <dd>
                                <span class="status">❤文轩图书惠</span>
                            </dd>
                            <dd>
                                <span class="status">
                                    ❤老客户回馈，积分换礼券，购书更实惠<br />❤大陆非新疆西藏地区包邮，新疆西藏运费每单20元
                                </span>
                                <a class="link" href="#">详情 &gt;&gt;</a>
                            </dd>
                        </dl>
                    </div>
                    <!-- 书属性 -->

                </div>

                <!-- 加入购物车 -->
                <div class="addtocar clearfix">
                    <dl class="buy-num">
                        <dt class="attr-title">购买数量 ：</dt>
                        <dd>
                            <span class="buy-num-active">
                                <a href="javascript:void(0);" class="reduce-btn" bind="reduce" title="减少">
                                    -
                                </a>
                                <input type="text" class="buy-num-text" value="1">
                                <a href="javascript:void(0);" class="add-btn" bind="increase" title="增加">
                                    +
                                </a>
                            </span> 件
                        </dd>
                    </dl>
                    <dl class="buy-active">
                        <dd>
                            <a href="#">
                            </a>
                        </dd>
                    </dl>
                    <dl class="buy-service">
                        <dt class="attr-title">服　　务 ：</dt>
                        <dd>
                            <span>由"文轩网"直接销售和发货，并提供售后服务</span>
                        </dd>
                        <dd>
                            <span class="character">
                                <a href="#" title="正品低价" target="_blank">正品低价</a> |
                                <a href="#" title="闪电发货" target="_blank">闪电发货</a> |
                                <a href="#" title="货到付款" target="_blank">货到付款</a> |
                                <a href="#" title="高效退换货" target="_blank">高效退换货</a></span></dd>
                    </dl>
                </div>
                <!-- 加入购物车 -->




            </div>
            </div>
            <!-- 商品介绍 -->
            <div class="intro clearfix">
                <div class="intro-head">
                    <div class="intro-tab">
                        <div class="tab-intro act">
                            <a href="#">商品介绍</a><s></s>
                        </div>
                        <div class="tab-say">
                            <a href="#">商品评论</a>
                            <a class="link" href="#" target="_blank">(0条)</a><s></s>
                        </div>
                    </div>
                    <div class="intro-b">
                        <div class="intro-b1">
                            <span class="intro-btitle">快速直达</span>
                            <a href="#">目录</a>
                            <a href="#">主编推荐</a>
                            <a href="#">内容简介</a>
                        </div>
                    </div>
                </div>
                <div class="intro-cont">
                    <ul>
                        <li>作　者：<a href="#" >罗自国</a> </li>
                        <li>出版社：<a target="_bland" class="link" href="#">印刷工业出版社</a></li>
                        <li>出版时间：2019-01-01</li>
                        <li>开　本：48开</li>
                        <li>页　数：无</li>
                        <li>印刷时间：2019-01-01</li>
                        <li>字　数：无</li>
                        <li>装　帧：盒装</li>
                        <li>语　　种：中文</li>
                        <li>版　次：1</li>
                        <li>印　次：4</li>
                        <li>I S B N：9787514215229</li>
                    </ul>
                </div>
            </div>
            <!-- 商品介绍 -->
        </div>
    </div>
    <!-- 主要内容 -->

    <!-- 回到顶部 -->
    <div class="totop">
        <img src="./imgs/topin.jpg" alt="">
    </div>
    <!-- 回到顶部 -->

    <!-- 底部 -->
    <div class="importFooter"></div>
    <!-- 底部 -->
</body>
<script src="./js/lib/jquery-1.8.3.js"></script>
<script src="./js/loginArea.js" type="module"></script>
<script src="./js/footer.js" type="module"></script>
<script src="./js/detail.js" type="module"></script>

</html>